<ng-container *ngIf="option===0">
  <div mdcCard class="inline-block" *ngFor="let comb of hrcombs; trackBy: trackComb">
    <div fxLayout="row" fxLayoutAlign="space-between center" [ngClass]="{'gap-row': true}">
      <div class="p-25">
        <button mdcButton outlined class="btn-tag" *ngFor="let tag of comb.tags">{{tag}}</button>
      </div>
    </div>
    <hr mdcListDivider>
    <div class="p-25">
      <button mdcButton raised (click)="onNameClick(char.name)" class="char-lvl-{{char.level}}"
        [ngClass]="{'char-hl': char.name===charSelected}" *ngFor="let char of comb.possible">{{char.name}}</button>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="option===1">
  <div *ngFor="let comb of hrcombs; trackBy: trackComb">
    <div mdcCard class="inline-block">
      <div class="p-25 inline-block gap-row">
        <button mdcButton outlined class="btn-tag" *ngFor="let tag of comb.tags">{{tag}}</button> </div>
      <span class="p-25">
        <button mdcButton raised (click)="onNameClick(char.name)" class="char-lvl-{{char.level}}"
          [ngClass]="{'char-hl': char.name===charSelected}" *ngFor="let char of comb.possible">{{char.name}}</button>
      </span>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="option===2">
  <div class="table-container">
    <table>
      <tr *ngFor="let comb of hrcombs; trackBy: trackComb; let even=even" [ngClass]="{'gap-row': even}">
        <td>
          <button mdcButton raised class="btn-tag" *ngFor="let tag of comb.tags">{{tag}}</button>
        </td>
        <td>
          <button mdcButton raised (click)="onNameClick(char.name)" class="char-lvl-{{char.level}}"
            [ngClass]="{'char-hl': char.name===charSelected}" *ngFor="let char of comb.possible">{{char.name}}</button>
        </td>
      </tr>
    </table>
  </div>
</ng-container>